<template>
  <div class="app-page">
    <div class="proDetail">
      <div class="proImg">
        <span class="style">免费</span>
        <img :src="dataArr.picture" />
      </div>
      <div class="proInfo">
        <h2> {{ dataArr.title }}</h2>
        <ul class="des">
          <li v-for="item in dataArr.subtitle">·{{ item }}</li>
        </ul>
      </div>
    </div>
    <div class="myform">
      <h2 ca="zc_v170628_tjdetail_infoclick"><i class="info" @click="isPlanTips=true" ></i>众测计划</h2>
      <textarea class="inputarea" name="plan" placeholder="请输入你的众测计划，这将成为我们筛选申请成功名
  单的主要条件，众测计划小提示请见右上方哦!"></textarea>
      <i class="total">0/500</i>    
    </div>
    <div class="fixBtn"><a href="javascript:;" class="sbtn" :class="{'gray':isgray}" @click="beforeSub" ca="zc_v170628_tjdetail_tjclick">{{submitText}}</a></div>
    <div class="dialog mtip" v-if="isToSubmitTips">
       <div class="shadow"></div>
       <div class="dialog-cnt minH">
          <h2>确认提交</h2>
          <p class="des">提交后不可修改</p>
          <div class="dialog-btn flex">
            <a href="javascript:;" ca="zc_v170628_tjalert_wait_click" @click="isToSubmitTips=false">再等等</a>
            <a href="javascript:;" @click="formSub" ca="zc_v170628_tjalert_tj_click">提交</a>
          </div>
       </div>       
    </div>
    <div class="dialog" v-if="isSucessTips">
      <div class="shadow"></div>
      <div class="dialog-cnt sub">
        <i class="icon-sure"></i>
        <h3>提交成功</h3>
        <p class="des">请耐心等待入选名单的公布</p>
        <i class="close close-sub" @click="isSucessTips=false" ></i>
      </div>      
    </div>
    <div class="dialog" v-if="isPlanTips">
      <div class="shadow"></div>
      <div class="dialog-cnt">
        <h2>众测计划提示</h2>
        <div>
          <h5>1.拟定您【众测报告】的提纲，可以回答以下问题：</h5>          
          <p>对于本次服务或产品有什么期待；</p>
          <p>准备从服务或产品的特点撰写报告；</p>
          <p>对服务或产品您可能有哪些内容可以和大家分享。</p>
          <h5>2.【众测计划】结构越是清晰，越是丰富，被选择的机率就越大；</h5>
          <h5>3. 请在【众测计划】文末留下以下信息：车型车龄信息、所在城市、联系方式（手机号或微信号）。</h5>
        </div>
         <i class="close" @click="isPlanTips=false"></i>
      </div>     
    </div>
  </div>  
</template>

<style lang="scss" scope>
@import '../../../assets/css/common.scss';

*,*:before,*:after{box-sizing:border-box}
.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}

html,body{height:100%;}
body{background:#f5f5f5;margin:0 auto;}
.shadow{width:100%;height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,.8);z-index:11;}
img{max-width:100%}
.gray{background:#bfbfbf!important;color:#fff;pointer-events:none;}
.app-page{
  .proDetail{padding:rem(15) rem(16);background:$_fff;margin-bottom:rem(8);display:flex;width:100%;max-height:rem(150);overflow:hidden;
    .proImg{width:rem(120);height:rem(120);overflow:hidden;margin-right:rem(18);position:relative;
       img{width:100%;height:100%;}
      .style{background:#0084FF;color:$_fff;border-radius:0 rem(10) rem(10) 0;padding:0 rem(5);position:absolute;top:0;left:0;z-index:5;}
    }
    .proInfo{flex:1;width:100%;overflow:hidden;
      h2{font-size:rem(19);color:#0a1825;margin-bottom:rem(5);max-height:rem(75);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
      .des{overflow:hidden;
        li{color:#707070;position:relative;font-size:rem(15);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        }
      }
    }    
  }
  .content{padding:rem(10)}
  .myform{position:relative;background:$_fff;
    h2{font-size:rem(16);color:#1f2730;padding:rem(10) rem(15) rem(10) 0;margin-left:rem(20);border-bottom:1px solid #e7e7e7;}
    .info{width:rem(20);height:rem(20);position:absolute;right:rem(15);top:rem(11.5);z-index:1;background:url(../../../assets/image/publicTest/wen.png) no-repeat;background-size:contain;}
    .inputarea{width:100%;height:rem(254);padding:rem(12) rem(17);border:none;font-size:rem(14);line-height:1.8;}
    .total{position:absolute;bottom:rem(10);right:rem(10);font-size:rem(12);color:$_ccc;}
  }
  .tips{padding:rem(10);position:absolute;top:0;left:0;z-index:3;}
  .fixBtn{background:$_fff;position:fixed;bottom:0;box-shadow:0 0 0 0 #e7e7e7;width:100%;max-width:640px;margin:0 auto;height:rem(60);}
  .sbtn{width:94.67%;background:#ff6600;font-size:rem(17);padding:rem(8);font-weight:bold;border-radius:rem(5);display:block;margin:rem(8) auto;text-align:center;color:$_fff;
    &:active{background:#e35b01;}
  }
  .dialog{position:absolute;width:100%;height:100%;top:0;left:0;
    .dialog-cnt{width:80%;margin:0 10%;min-height:rem(330);padding:rem(10) rem(18);color:#464848;background:$_fff;border-radius:rem(10);position:fixed;top:15%;z-index:11;
      .icon-sure{display:inline-block;width:rem(93);height:rem(93);background:url(../../../assets/image/publicTest/icon-sure.png) no-repeat;background-size:contain;}
      h2{text-align:center;padding:rem(12) 0;font-size:rem(20);}
      h3{font-size:rem(22);color:#243742;padding:rem(12) 0;}
      h5{font-size:rem(14);line-height:2;}
      p{font-size:rem(13);line-height:1.8;}
      .des{font-size:rem(17);color:#4f5b63;}
    }
    .minH{min-height:rem(148);padding:rem(10) 0 0;top:30%;
      h2{font-size:rem(21);color:rgba(0,0,0,0.87);padding-bottom:rem(5)}
      .des{font-size:rem(15)}
      .dialog-btn{border-top:1px solid #e8e8e8;position:absolute;bottom:0;width:100%;}
      .flex{display:flex;
        a{display:block;width:100%;height:rem(50);line-height:rem(50);font-size:rem(17);color:#0084ff;
          &:first-child{border-right:1px solid #e8e8e8;color:$_999;}
        }
      }
    }
    .sub{text-align:center;padding-top:rem(83);}
    .close{width:rem(31);height:rem(31);display:block;position:absolute;top:rem(380);left:50%;margin-left:rem(-16);z-index:11;background:url(../../../assets/image/publicTest/icon-close.png) no-repeat;background-size:contain;}
    .close-sub{top:rem(350);}
  }
  .mtip{text-align:center;}  
}
</style>

<script>
import common from "../../../assets/js/common.js";
import {Toast} from 'mint-ui';
export default {
  data() {
    return {
      loginUrl:common.isdev() + '/zhongce/checkLogin.htm?sid=',
      isLogin:false,
      proDetailUrl:common.isdev() + '/zhongce/item.htm',//商品接口 需带sid
      dataArr:{},
      isgray: sessionStorage.getItem('isSubmit') ? true : false,
      submitUrl:common.isdev() + '/zhongce/apply.htm',
      isSucessTips:false,
      isPlanTips:false,
      sid:common.getQueryString('sid') ? common.getQueryString('sid') : '',
      isShowShareBtn:common.checkAppversionIsGt35() || false,
      submitText: sessionStorage.getItem('isSubmit') ? "已申请" : "立即申请",
      maxInputChar: 500,
      isToSubmitTips: false
    }
  },
  created() {
    var vm = this;

    //较验登录
    vm.checkLogin(function(){
      console.log("islogin:", vm.$data.isLogin);
    
      //商品详情
      vm.$http.get(vm.$data.proDetailUrl +="?sid=" + vm.$data.sid ).then((d)=>{
        var code = d.body.errorCode, msg =d.body.msg;
        if(code == '1' ){
          vm.$data.dataArr = d.body.obj;
          vm.$data.isTest = false;
        }else{
          Toast(d.body.msg);
        }
      },(err)=>{
        Toast("网络异常");
      });
    });
  },
  mounted() {
   var vm = this;
   //e.cotrolHeight();
   //如果缓存有数据，就读缓存数据
  /* var planVal = localStorage.getItem('planVal');
   $(".inputarea").val(planVal);*/
    vm.hideShareMenu();

		//打点
		vm.$nextTick(function () {
			common.ANA_AnalyticsScan();
		});

    //ios keyup 兼容
    $(".inputarea").on('input paste', function() {
      vm.limitStr(this);
    });
  },
  methods: {
    //隐藏右上角分享菜单
    hideShareMenu() {
      if(this.isShowShareBtn){
        lb.hideMenu(function (data) {})
      }
    },
    //申请按钮置灰
    setBtnGray() {
      var vm = this;   
      vm.$data.isgray = true;
      vm.$data.submitText = "已申请";       
    },
    //判断登录
    checkLogin: function( fn ) {
      var vm = this;
      vm.$http.get(vm.$data.loginUrl + vm.$data.sid).then((d)=>{
        var result = d.body.result, url = d.body.msg;
        if(result == -99 ){
          window.location.href = url;
        }else{
          vm.$data.isLogin = true;
          if(typeof fn == "function") fn();
        }
      },(err)=>{
        Toast("网络异常");
      });
    }, 
    //提交准备
    beforeSub() {
      var vm = this, plan = document.getElementsByName("plan")[0];
      if(plan.value==''){
          Toast("请输入众测计划");
          return false;
      }
      else{        
        //计划内容进行浏览器缓存，以免一些特殊原因造成数据丢失        
       /* try{
          localStorage.setItem('planVal', plan.value); 
        }catch(oException){
          if(oException.name == 'QuotaExceededError'){
            console.log('超出本地存储限额！');
            //如果历史信息不重要了，可清空后再设置
            localStorage.clear();
            localStorage.setItem('planVal', plan.value); 
          }
        }*/
        vm.$data.isToSubmitTips = true;
        
      }
    },
    formSub() {
      var vm = this, plan = document.getElementsByName("plan")[0];
      //提交到后台处理 
        vm.$http.post(vm.submitUrl, {sid: vm.$data.sid, msg: plan.value}).then((d)=>{
          var code = d.body.errorCode, msg = d.body.msg;           
          if(code == 1){
            //提交提示消失
            vm.$data.isToSubmitTips = false;       
            //提交成功弹窗
            vm.$data.isSucessTips = true;             
          }else{              
            Toast(msg);  
          }           
          //提交提示消失
          vm.$data.isToSubmitTips = false;
          //设置一个状态，标识是否以提交过
          sessionStorage.setItem("isSubmit", true);
          //刷新页面
          // let url = window.location.href;
          // url = ~url.lastIndexOf('v') ? url.substr(0, url.lastIndexOf('v')+1) : url;
          // url = url + "&v=" + 10000*Math.random();
          // window.location.href = url;
          vm.$nextTick(_ => vm.setBtnGray() );    
        },(err)=>{
            Toast("网络异常"); 
        }); 
    },
    //textarea 高度控制
   /* cotrolHeight(){
      var　winH = window.document.body.offsetHeight, topH = $(".inputarea").offset().top +  $(".inputarea").height(), btnH = $(".sbtn").height(),
      lessH = winH - topH - btnH;
      $(".inputarea").height(lessH);
    },*/
    //字符控制
    limitStr(oDom) {
      var val = oDom.value, vm = this;     
      if(val.length > vm.maxInputChar) {
        oDom.value = val.substr(0, vm.maxInputChar);
        Toast('最多可输入'+vm.maxInputChar+ '个字'); 
        return false;
      }
      else {
        $('.total').html(val.length + '/' + vm.maxInputChar);
        return true;
      }
    }
  }
}
</script>